/** @jsxImportSource @emotion/react */
import * as React from "react";
import {BlobInputList, CCell, Cell, Table, TableBody, TableHead, TableRow, Text,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {DirectLink} from "../../../routing/Link";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

interface Props  extends InternalItemProps{
    config?: any[];    //有配置模式的 : 表对象的默认取值；
}
const cb问题概输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={5} datalist={[]}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb处理情输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={3}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const config问题处=[
    ['联络单/意见书编号','n',150],['问题概述','c',520,cb问题概输入],['处理情况','r',330,cb处理情输入]
] as Each_ZdSetting[];
export const itemA问题处=['问处表', ];
export const ProblemHandle=
    React.forwardRef(({ children, show ,alone=true,refWidth,label,}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA问题处,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            {label}：
        </Text>;
        const [render]=useTableEditor({inp,setInp,
            headview, config: config问题处, table:'问处表',column:2 });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>
                {render}
                { children }
            </InspectRecordLayout>
        );
    } );

//无损检测人员资格  【斜杠】?? '／'
export const ProblemHandleVw = ({orc, rep}: { orc: any, rep: any }
) => {
    //const theme= useTheme();
    //两半各安显一排模式的用：const [renderRows,]=useRep2hTableViewer(config焊接资格, '附设表', orc,true,true,true);
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}}}>
            <Text id='ProblemHandle' variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>监检过程中发现问题的处理情况报告</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={["3.5%", "13%", "%", "18%"]}
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize: '0.65rem'}}>序号</Text></CCell><CCell><Text
                    css={{fontSize: '0.8rem'}}>联络单/意见书编号</Text></CCell>
                    <CCell>问题概述</CCell><CCell>处理情况</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <DirectLink
                    href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProblemHandle#ProblemHandle`}>
                    {(orc?.问处表 || [{}])?.map((o: any, i: number) => {
                        if (!(orc?.问处表?.length > 0)) return (
                            <TableRow key={i}><CCell colSpan={4}><Text css={{fontSize: '1.6rem'}}>空 表</Text></CCell></TableRow>);
                        return (
                            <TableRow key={i}>
                                <CCell>{i + 1}</CCell>
                                <CCell>{o.n}</CCell>
                                <Cell css={{whiteSpace: 'pre-wrap'}}>{o.c}</Cell>
                                <Cell css={{whiteSpace: 'pre-wrap'}}>{o.r}</Cell>
                            </TableRow>
                        );
                    })}
                </DirectLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
